<template>
  <a-modal
    title="生成账单"
    @cancel="cancel"
    @ok="handleOk"
    width="40%"
    :visible="visible"
  >
    <div slot="footer" class="modal-footer">
      <a-button @click="cancel">取消</a-button>
      <a-button type="primary" @click="handleOk" :loading="loading"
        >确定</a-button
      >
    </div>
    <a-form-model
      class="form"
      :model="formData"
      :rules="formRules"
      ref="formRule"
    >
      <a-form-model-item label="起始日期：" prop="startTimeValue">
        <a-date-picker
          style="width: 100%"
          format="YYYY-MM-DD"
          @change="changeStartTime"
          v-model="startTimeValue"
        />
      </a-form-model-item>
      <a-form-model-item label="结束日期：" prop="endTimeValue">
        <a-date-picker
          format="YYYY-MM-DD"
          style="width: 100%"
          @change="changeEndTime"
          v-model="endTimeValue"
        />
      </a-form-model-item>
      <a-form-model-item label="币种：" prop="billCurrency">
        <a-select
          style="width: 100%"
          show-search
          option-filter-prop="children"
          v-model="formData.billCurrency"
          allowClear
          placeholder="全部币种"
        >
          <a-select-option
            :name="item.exchangeCurrency"
            :value="item.exchangeCurrency"
            v-for="item in settlementCurrencys"
            :key="item.sysCurrencyId"
          >
            {{ item.exchangeCurrency }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="备注：">
        <a-input :maxLength="128" v-model="formData.remarks" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { clientBill_createBill } from "@/apis/system/FinanceManagement/clientBill";
import { logi_getCurrency } from "@/apis/system/setManage/setWarehouse";
export default {
  data() {
    return {
      loading: false,
      startTimeValue: null,
      endTimeValue: null,
      tenantId: null,
      visible: false,
      formData: {
        startTimeValue: null,
        endTimeValue: null,
        billCurrency: null,
        remarks: "",
      },
      formRules: {
        startTimeValue: [
          {
            required: true,
            message: "请选择账单起始日期",
            trigger: "change",
          },
        ],
        endTimeValue: [
          {
            required: true,
            message: "请选择账单结束日期",
            trigger: "change",
          },
        ],
        billCurrency: [
          {
            required: true,
            message: "请选择币种",
            trigger: "blur",
          },
        ],
      },
      settlementCurrencys: [],
    };
  },
  mounted() {
    this.$bus.$off("createBill");
    this.$bus.$on("createBill", (data) => {
      this.visible = true;
      this.tenantId = data.tenantId;
    });
    this.getCurrency();
  },
  methods: {
    changeStartTime(date, dateString) {
      this.formData.startTimeValue = `${dateString} 00:00:00`;
    },
    changeEndTime(date, dateString) {
      this.formData.endTimeValue = `${dateString} 23:59:59`;
    },
    cancel() {
      this.$refs.formRule.resetFields();
      this.loading = false;
      this.startTimeValue = null;
      this.endTimeValue = null;
      this.formData = {
        startTimeValue: null,
        endTimeValue: null,
        billCurrency: null,
        remarks: "",
      };
      this.visible = false;
    },
    handleOk() {
      this.loading = true;
      this.$refs.formRule.validate(async (valid) => {
        if (valid) {
          let res = await clientBill_createBill(this.tenantId, this.formData);
          if (res.code == "10000") {
            this.loading = false;
            this.cancel();
          }
        } else {
          this.loading = false;
          return false;
        }
      });
    },
    //获取币种的接口
    async getCurrency() {
      let res = await logi_getCurrency({ size: 100000, current: 1 });
      if (res.code == "200") {
        this.settlementCurrencys = res.responseBody.records;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/.form {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 5% 0;
  .ant-form-item {
    width: 70%;
    display: flex;
    .ant-form-item-label {
      width: 80px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>